<template>
    <div>
      <div class="hearder-search">
        <div class="breadcrumb-container">
          <div class="search_box">
            <el-input v-model="searWord.name" placeholder="姓名" @keyup.enter.native="searchBtn" size="small"
                      class="w-140"></el-input>
            <component
                v-bind:is="item.propertyType"
                :property.sync="item"
                v-for="(item, index) in getPower"
                :key="index"
                @updateVal="updateVal"
            ></component>
          </div>
          <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>重置刷新</el-button>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
                  ref="multipleTable"
                  :data="arryList"
                  :stripe="tableoption.tableStripe"
                  :border="tableoption.tableBorder"
                  tooltip-effect="dark"
                  style="width: 100%"
                  header-cell-class-name="table-text-c"
                  cell-class-name="table-text-c">
            <el-table-column
                prop="id"
                label="ID"
                width="90"
                align="center">
            </el-table-column>
            <el-table-column
                label="头像"
                align="center">
              <template slot-scope="scope">
                <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
              </template>
            </el-table-column>
            <el-table-column
                    label="学生姓名">
              <template slot-scope="scope">
                {{scope.row.name?scope.row.name:''}}
              </template>
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="班级">
              <template slot-scope="scope">
                {{scope.row.classes?scope.row.classes.class_name:''}}
              </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200">
              <template slot-scope="scope">
                <el-button size="small" @click="addActive(scope.row)">查看预约区角信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
                background
                :page-size="page.pagesize"
                :current-page="page.pageindex"
                layout="total, prev, pager, next"
                :total="page.total"
                @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <cornerList :visible.sync="queryCorner.cornerVisible" :userOption="queryCorner.userInfo"></cornerList>
    </div>
</template>

<script>
import cornerList from '@/components/dialog/query/cornerList'
import {pagination, tableoption} from '@/utils/util.js'

export default {
  components: {
    cornerList
  },
  data () {
    return {
      searchsectionId: '',
      searchclassesId: '',
      tableList: [],
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      cornertype: true,
      cornername: 0,
      first_id: '',
      arryList: [], // 数据列表
      // 搜索
      searchWord: '',
      searchCatId: '',
      searWord: {
        name: '',
        section_id: '',
        class_id: ''
      },
      // 弹窗
      dialogVisible: false,
      editIndex: null,
      foodOption: '',
      classesListNew: [],
      sectionList: [],
      classesList: [],
      queryCorner: {
        cornerVisible: false,
        userInfo: null
      }
    }
  },
  created () {
    // this.classList()
    // this.InitFn()
  },
  methods: {
    InitFn() {
      this.searWord.p = this.page.pageindex
      this.$fetch(this.api.admin_student_index, this.searWord).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 初始化 旧接口
    // InitFn () {
    //   this.searWord.p = this.page.pageindex
    //   this.$post(this.api.admin_corner_apply_list, this.searWord).then((response) => {
    //     if (!response.code) {
    //       this.arryList = response.list.data
    //       this.page.total = response.list.total
    //     }
    //   }).catch((err) => {
    //     console.log(err)
    //   })
    // },
    // 分页
    handleSizeChange (val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 搜索
    searchBtn () {
      this.page.pageindex = 1
      this.InitFn()
    },
    addActive (option) {
      this.queryCorner.userInfo = option
      this.queryCorner.cornerVisible = true
    },
    // 刷新页面
    refreshFn () {
      this.page.pageindex = 1
      this.searWord.name = ''
      this.searWord.section_id = ''
      this.searWord.class_id = ''
      let newGetPower = JSON.parse(JSON.stringify(this.getPower))
      newGetPower['section_id'].valueText = '';
      newGetPower['section_id'].child[0].valueText = '';
      this.getPower = newGetPower;
      this.InitFn()
    },
    // 更新值
    updateVal(option) {
      console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searWord[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searWord[option.select[i].name] = option.select[i].valueText
          } else {
            this.searWord[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    }
  },
  mounted () {}
}
</script>
